import "@/global.less"
import { Column } from "@ant-design/charts" // 替换为 Column 组件
import { GridContent } from "@ant-design/pro-components"
import { useModel } from "@umijs/max"
import { App, Card, Table } from "antd"
import { Col, Row } from "antd/lib"
import React, { memo, Suspense, useEffect, useState } from "react"

const SalesCard = memo(({ salesData }: { salesData: any[] }) => (
  <Card bordered={false} bodyStyle={{ padding: 0 }}>
    <div className="salesCard">
      <Row>
        <Col xl={16} lg={12} md={12} sm={24} xs={24}>
          <div className="salesBar">
            <Column
              height={295}
              data={salesData}
              xField="x"
              yField="y"
              meta={{
                x: { alias: "月份" },
                y: { alias: "产量" }
              }}
              axis={{
                y: { position: "left" }, // y轴在左侧
                x: { position: "bottom" } // x轴在底部
              }}
              columnStyle={{
                fill: "#1890ff",
                radius: [2, 2, 0, 0]
              }}
            />
          </div>
        </Col>
      </Row>
    </div>
  </Card>
))

// 其他代码保持不变...
const ProdLogger: React.FC = () => {
  const { message } = App.useApp()
  const [isReload, setIsReload] = useState(false)
  const { produceAmountData, produceDayAmountData, updateProduceData } =
    useModel("produceModel")
  const { callPy, wsIsOpenRef } = useModel("websocketModel")

  const salesData = []
  for (let i = 0; i < produceAmountData.length; i += 1) {
    salesData.push({
      x: produceAmountData[i][0],
      y: produceAmountData[i][1]
    })
  }

  useEffect(() => {
    console.log("ProdLogger 数据请求,isReload:", isReload)
    const fetchData = async () => {
      try {
        updateProduceData({ isOperateMode: false })
        const response = await callPy("db", "get_produce_amount_data", [])
        if (response.state) {
          updateProduceData({
            produceAmountData: response.data[0],
            produceDayAmountData: response.data[1]
          })
        } else {
          message.error("生产日志数据获取失败:" + response.info)
          updateProduceData({ produceAmountData: [], produceDayAmountData: [] })
        }
      } catch (error) {
        console.log("数据加载失败", error)
      }
    }

    if (wsIsOpenRef.current) {
      fetchData()
    } else {
      // 过1秒之后再尝试获取数据
      setTimeout(() => {
        fetchData()
      }, 500)
    }
  }, [isReload])

  const columns = [
    {
      title: <span style={{ color: "#9933cc", fontSize: 18 }}>日期</span>,
      dataIndex: "dayIndex",
      key: "dayIndex"
    },
    {
      title: <span style={{ color: "#9933cc", fontSize: 18 }}>产量</span>,
      dataIndex: "dayAmount",
      key: "dayAmount"
    }
  ]

  return (
    <>
      <GridContent>
        <Suspense fallback={null}>
          <SalesCard salesData={salesData} />
        </Suspense>
      </GridContent>

      <Card title="近一个月日产量记录">
        <p>
          <span style={{ color: "#FF0000", fontSize: 16 }}>
            备注: 产量记录会在新的一年开始的时候进行重置,请在年末做好备忘记录{" "}
          </span>
        </p>
        {produceDayAmountData.length >= 1 ? (
          <Table columns={columns} dataSource={produceDayAmountData} />
        ) : (
          <p>暂无产量记录</p>
        )}
      </Card>
    </>
  )
}

export default () => (
  <App>
    <ProdLogger />
  </App>
)
